﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Styles.aspx.cs" Inherits="Lessons_Styles" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../Style/LessonsStyle.css" rel="stylesheet" type="text/css" />
    Стилове в WPF<br />
    Съдържание:<br />
    <ul>
        <li>Защо са ни необходими стилове?</li>
        <li>Inline стилове</li>
        <li>Наименовани стилове</li>
        <li>Element-typed стилове </li>
        <li>Styling data templates</li></ul>
    <div>
        <p>
            Защо са ни необходими стилове?
        </p>
        <p>
            <span>Стилът е набор от пропъртита чрез които се прилагат към някакъв контент.Изполвасе
                основно при визуалното рендериране като напрвипменр шрифта на текста на бутон. WPF
                стиловете имат специален фичер за компилиращеите се пруложениея, включително и способността
                да прилага различни стиловеве базирани на някой евент. Друга основна функция на
                стиловете е способността им да се групират заедно които в провтивен случай трябва
                да се определят индивидуално. </span>
        </p>
    </div>
    <div>
        <p>
            Inline стилове
        </p>
        <p>
            <span>Всеки елемент в WPF които наследява FrameworkElement има Style пропърти.Чрез това
                пропърти може да се сетва директно стилове на съответния елемент. Дефинирането на
                стилове като ресурси предоставя всичките удобства и гъвкавост котио предоставят
                ресурсите.   </span>
                 <table border=1><tbody><tr><td><div class=Code>
                &lt;Window x:Class=&quot;InlineStyles.InlineStyleWindow&quot;<br />
    xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
    xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
    Title=&quot;Inline Styles&quot; Height=&quot;458&quot; Width=&quot;743&quot;&gt;<br />
    &lt;StackPanel Orientation=&quot;Horizontal&quot;&gt;<br />
        &lt;Button Style=&quot;{StaticResource controlStyle}&quot;&gt;1&lt;/Button&gt;<br />
        &lt;ComboBox Style=&quot;{StaticResource controlStyle}&quot;&gt;<br />
            &lt;ComboBox.Items&gt;2&lt;/ComboBox.Items&gt;<br />
        &lt;/ComboBox&gt;<br />
        &lt;Expander Style=&quot;{StaticResource controlStyle}&quot; Content=&quot;3&quot;/&gt;<br />
            &lt;TabControl Style=&quot;{StaticResource controlStyle}&quot;&gt;<br />
                &lt;TabControl.Items&gt;4&lt;/TabControl.Items&gt;<br />
            &lt;/TabControl&gt;<br />
            &lt;ToolBar Style=&quot;{StaticResource controlStyle}&quot;&gt;<br />
                &lt;ToolBar.Items&gt;5&lt;/ToolBar.Items&gt;<br />
            &lt;/ToolBar&gt;<br />
            &lt;InkCanvas Style=&quot;{StaticResource controlStyle}&quot;/&gt;<br />
                &lt;TextBox Style=&quot;{StaticResource controlStyle}&quot; Text=&quot;7&quot;/&gt;<br />
    &lt;/StackPanel&gt;<br />
&lt;/Window&gt;<br />

                </div></td></tr></tbody></table>
        </p>
    </div>
    <div>
        <p>
            Наименовани стилове
        </p>
        <p>
            <span>Когато поставин някои стил като ресуср разработчика може да го наименова и съответно
                да го използва с името му в съответната инстанция. Също така можем да оптимизираме
                до такава степен че да използваме таг префикса на компонент с атрибута TargetType.
                Чрез този атрибут могат да се сетват пропъртита които са на разположение само за
                този тип.<br />
                Преизползване на стилове- TargeтТype атрибута позволява преизползване и прилагане
                на един и същи стил върху много по брои елементи от един тип.<br />
                Освен преизползване стиловете могат и да се override-ват но само на конкретна инстанция
                като се сетне директно пропъртито на елемента. </span>
                   <table border=1><tbody><tr><td><div class=Code>
                &lt;Window x:Class=&quot;ReusingStyles.ReusingStylesWindow&quot;<br />
    xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
    xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
    Title=&quot;Reusing Styles&quot; Height=&quot;498&quot; Width=&quot;602&quot;&gt;<br />
    &lt;StackPanel Orientation=&quot;Vertical&quot;&gt;<br />
        &lt;Button Style=&quot;{StaticResource controlStyle}&quot;&gt;1&lt;/Button&gt;<br />
        &lt;ComboBox Style=&quot;{StaticResource controlStyle}&quot;&gt;<br />
            &lt;ComboBox.Items&gt;2&lt;/ComboBox.Items&gt;<br />
        &lt;/ComboBox&gt;<br />
        &lt;InkCanvas Style=&quot;{StaticResource controlStyle}&quot;/&gt;<br />
        &lt;TextBox Style=&quot;{StaticResource controlStyle}&quot; Text=&quot;3&quot;/&gt;<br />
    &lt;/StackPanel&gt;<br />
&lt;/Window&gt;<br />

                </div></td></tr></tbody></table>
            <p>
            </p>
    </div>
    <div>
        <p>
            Element-typed стилове
        </p>
        <p><span>
            За равномерното прилагане на стилове до всички инстанции на даден тип елементи.
            За целата трябва да се използва атрибута Targettype но без Key. Когато инстанцията
            на някои елемемт е създадена се използва стила които съвпада с target type на стила
            на контрола.<br />
            Element-typed стиловете са много удобни за използване. Ако искаме всички инстанции
            на опреден елемент да изглеждат по едентичен начин е удобно да се използва този
            тип стилове. Стил с TargetType се проилага само на елементи от точно този тип.
       
            
            
            
            </span>
            <table border="1">
                <tbody>
                    <tr>
                        <td>
                            <div class="Code">
                                &lt;Window x:Class=&quot;ElementTypedStyles.ElementTypedWindow&quot;<br />
                                xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                Title=&quot;ElementTypedStyles&quot; Height=&quot;315&quot; Width=&quot;344&quot;&gt;<br />
                                &lt;StackPanel Margin=&quot;5&quot;&gt;<br />
                                &lt;TextBlock Margin=&quot;5&quot; FontSize=&quot;32&quot;&gt;two toggle buttons:&lt;/TextBlock&gt;<br />
                                &lt;CheckBox Margin=&quot;5&quot;&gt;my checkbox&lt;/CheckBox&gt;<br />
                                &lt;RadioButton Margin=&quot;5&quot;&gt;my radio button&lt;/RadioButton&gt;<br />
                                &lt;/StackPanel&gt;<br />
                                <br />
                                &lt;!--Manually applying element-typed styles to derived types--&gt;<br />
                                <br />
                                &lt;!--&lt;Window.Resources&gt;<br />
                                &lt;Style x:Key=&quot;toggleButtonStyle&quot; TargetType=&quot;ToggleButton&quot;&gt;<br />
                                &lt;Setter Property=&quot;FontSize&quot; Value=&quot;32&quot; /&gt;<br />
                                &lt;/Style&gt;<br />
                                &lt;Style TargetType=&quot;RadioButton&quot;<br />
                                BasedOn=&quot;{StaticResource toggleButtonStyle}&quot; /&gt;<br />
                                &lt;Style TargetType=&quot;CheckBox&quot;<br />
                                BasedOn=&quot;{StaticResource toggleButtonStyle}&quot; /&gt;<br />
                                &lt;/Window.Resources&gt;<br />
                                &lt;StackPanel Margin=&quot;5&quot;&gt;<br />
                                &lt;TextBlock Margin=&quot;5&quot; FontSize=&quot;32&quot;&gt;two toggle buttons:&lt;/TextBlock&gt;<br />
                                &lt;CheckBox Margin=&quot;5&quot;&gt;my checkbox&lt;/CheckBox&gt;<br />
                                &lt;RadioButton Margin=&quot;5&quot;&gt;my radio button&lt;/RadioButton&gt;<br />
                                &lt;/StackPanel&gt;--&gt;<br />
                                &lt;/Window&gt;<br />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
    </div>
    <div>
        <p>
            Styling data templates
        </p>
        <p>
            <span>Data template е дърво от елементи които се разширяват в определен контекст. Визуалните
                елементи могат да се "разширяват" runtime и да рендерират обекти от data. </span>
            <table border="1">
                <tbody>
                    <tr>
                        <td>
                            <div class="Code">
                                &lt;Window x:Class=&quot;DataTemplates.DataTemplatesWindow&quot;<br />
                                xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;<br />
                                xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;<br />
                                xmlns:local=&quot;clr-namespace:DataTemplates&quot;<br />
                                Title=&quot;Data Templates&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;<br />
                                &lt;StackPanel&gt;<br />
                                &lt;StackPanel.Resources&gt;<br />
                                &lt;DataTemplate DataType=&quot;{x:Type local:River}&quot;&gt;<br />
                                &lt;Border BorderBrush=&quot;Blue&quot; BorderThickness=&quot;3&quot; CornerRadius=&quot;12&quot;&gt;<br />
                                &lt;Grid Margin=&quot;4&quot;&gt;<br />
                                &lt;TextBlock&gt;<br />
                                &lt;Run Text=&quot;The&quot;/&gt;<br />
                                &lt;TextBlock Text=&quot;{Binding Name}&quot;/&gt;<br />
                                &lt;Run Text=&quot;is&quot;/&gt;<br />
                                &lt;TextBlock Text=&quot;{Binding MilesLong}&quot; /&gt;<br />
                                &lt;Run Text=&quot;miles long.&quot; /&gt;<br />
                                &lt;/TextBlock&gt;<br />
                                &lt;/Grid&gt;<br />
                                &lt;/Border&gt;<br />
                                &lt;/DataTemplate&gt;<br />
                                &lt;local:River x:Key=&quot;theRiver&quot; Name=&quot;Maritza River&quot; MilesLong=&quot;1450&quot;
                                /&gt;<br />
                                &lt;/StackPanel.Resources&gt;<br />
                                &lt;ContentControl Content=&quot;{StaticResource theRiver}&quot; /&gt;<br />
                                &lt;/StackPanel&gt;<br />
                                &lt;/Window&gt;<br />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
    </div>
</asp:Content>
